<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-18 19:06:07
 * @LastEditTime: 2020-05-15 12:21:50
 * @FilePath: \client\src\components\admin\NavBar.vue
 * @Description: 导航栏组件
 -->

<template>
  <b-navbar toggleable="lg" type="dark" variant="dark" sticky>
    <b-container>
      <b-navbar-brand to="/admin">小栈后台管理</b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item to="/admin">仪表盘</b-nav-item>
          <b-nav-item to="/admin/manage">文章管理</b-nav-item>
          <b-nav-item to="/admin/editor">写博客</b-nav-item>
          <b-nav-item to="/admin/setting">设置</b-nav-item>
        </b-navbar-nav>

        <b-navbar-nav class="ml-auto" v-if="adminToken">
          <b-nav-item-dropdown text="我的" right>
            <b-dropdown-item to="/">回到博客</b-dropdown-item>
            <b-dropdown-item @click="exit()">退出系统</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-container>
  </b-navbar>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "NavBar",
  computed: {
    ...mapState({
      adminToken: state => state.app.adminToken
    })
  },
  methods: {
    ...mapMutations(["setAdminToken"]),
    exit() {
      this.setAdminToken("");
      window.localStorage.removeItem("admin_token");
      this.$router.replace("/admin/login");
    }
  }
};
</script>

<style scoped>
</style>
